<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>11-组件的嵌套</title>
  <style>
    .foo {
      width: 300px;
      height: 300px;
      background-color: cyan;
    }
    .son {
      width: 200px;
      height: 200px;
      background-color: blue;
    }
    .demo {
      width: 400px;
      height: 300px;
      background-color: plum;
    }
  </style>
</head>
<body>
  <div id="app">
    <h1>vue的例子</h1>
    <p>{{msg}}</p>
    <hr>
    <my-son></my-son>
    <hr>
    <my-foo></my-foo>
    <my-demo></my-demo>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    Vue.config.productionTip = false; // 关闭生产提示
    Vue.component('my-foo',{
      template:`<div class="foo">
          <h2>这是一个父组件</h2>
          <p>这是一个父组件中的段落内容</p>
          <hr>
          <my-son></my-son>
        </div>`
    })
    Vue.component('my-son',{
      template:`<div class="son">
          <h2>这是一个子组件son组件</h2>
          <p>这是一个子组件中的段落内容</p>
        </div>`
    })

    Vue.component('my-demo',{
      template:`<div class="demo">
          <h3>这是一个Demo组件内容</h3>
          <hr>
          <my-son></my-son>
        </div>`
    })
    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello'
      }
    })

    /**
     * 有些组件在封装完成之后，可能在其它组件中也会被多次用到，这就形成了组成的嵌套 
     * 以全局组件为例来说明组件的嵌套
     * 
     * 全局组件可以在任何位置 来直接使用，非常的灵活
     * 可能在其它组件内部直接使用
     * */
  </script>
</body>
</html>